<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<script src="../../bower_components/webcomponentsjs/webcomponents-lite.js">
		</script>
		<link rel="import" href="../../bower_components/polymer/polymer.html">
		<title>Defining a Polymer Element from the Main Document</title>
	</head>

	<body>
		<dom-module id="main-document-element">
			<template>
				<p>
					首先说下，只有在写demo的时候，才会用到这种写法。生产环境中，都是需要把组件写在各自独立的文件中。
				</p>
			</template>
			<script>
//				HTMLImports.whenReady()这个方法你可以把它理解成JQ里的document.ready()或者AMD里的domReady(),
//				可以确保引用的组件dom都被加载完了再进行下一步的调用，一般都是用在index.html也就是程序的入口处。
				HTMLImports.whenReady(function() {
					Polymer({
						is: 'main-document-element'
					});
				});
			</script>
		</dom-module>
		<main-document-element></main-document-element>
	</body>

</html>